<template>
  <!--顾问介绍管理-->
  <div class="wrapper">
    <!--添加-->
    <div style="padding-bottom: 10px">
      <Button v-show="table" type="success" size="small" @click="show1">添加</Button>
      <Button v-show="table2" type="success" size="small" @click="back">返回</Button>
    </div>
    <!--表格-->
    <div v-show="table">
      <Table border stripe :columns="columns" :data="data"></Table>
      <!--Vue组件-->
      <div class="page">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>
    <!--新增-->
    <div v-show="show">
      <Row>
        <i-col span="5">
          <div>
            <upload :echo="echo" @returnValue="returnValue1"></upload>
          </div>
        </i-col>
        <i-col span="19">
          <div class="add_style" style="padding-top: 50px">
            <span>排名:</span>
            <Input v-model="formItem.rank" placeholder="" style="width: 620px"></Input>
          </div>
          <div class="add_style">
            <span>姓名:</span>
            <Input v-model="formItem.name" placeholder="" style="width: 620px"></Input>
          </div>
          <div class="add_style">
            <span>邮箱:</span>
            <Input v-model="formItem.mail" placeholder="" style="width: 620px"></Input>
          </div>
          <div class="add_style">
            <span>联系方式:</span>
            <Input v-model="formItem.phone" number placeholder="" style="width: 620px"></Input>
          </div>
          <div>
            <span style="font-size: 14px;font-weight: bold;display: inline-block;width:70px;">是否显示:</span>
            <i-switch size="large" v-model="formItem.status">
              <span slot="open">开启</span>
              <span slot="close">关闭</span>
            </i-switch>
          </div>
        </i-col>
      </Row>
      <div style="padding-top: 20px">
        <div class="add_style">
          <span style="display: block">任职:</span>
          <table class="customers">
            <tr>
              <th style="width: 300px">协会、职务</th>
              <th>
                <Button type="success" size="small" @click="add">添加</Button>
              </th>
            </tr>
            <tr class="alt" v-for="(office,index) in formItem.adviserResume">
              <td>
                <Input v-model="office.position" placeholder=""></Input>
              </td>
              <td>
                <Button size="small" type="error" @click="remove1(office,index)">删除</Button>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div class="add_style">
        <span>简介:</span>
        <div>
          <VueUeditorWrap v-model="formItem.particulars" :config="myConfig"></VueUeditorWrap>
        </div>
      </div>

      <div v-show="addBtn">
        <div class="add_style">
          <Button size="small" type="primary" @click="save">保存</Button>
          <Button size="small" type="primary" @click="back">取消</Button>
        </div>
      </div>
      <div v-show="compileBtn">
        <div class="add_style">
          <Button size="small" type="primary" @click="save1">保存</Button>
          <Button size="small" type="primary" @click="back">取消</Button>
        </div>
      </div>
    </div>
    <!--删除-->
    <Modal v-model="modal2" width="360">
      <div style="text-align:center">
        <p>删除不可恢复，是否确定删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="notarizeRemove">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import upload from '../module/upload.vue';
  import paging from '../module/paging.vue';
  import VueUeditorWrap from 'vue-ueditor-wrap'

  export default {
    components: {upload, paging, VueUeditorWrap},
    data() {
      return {
        URL: this.$api.url,
        /*分页*/
        all: 1,
        cur: 1,
        /*查询url*/
        inquireurl: this.$api.url + '/adviser/selectAll/',
        /*公用*/
        show: false,
        /*添加按钮*/
        table: true,
        addBtn: false,
        /*返回按钮*/
        table2: false,
        /*编辑按钮*/
        compileBtn: false,
        /*表单*/
        formItem: {
          id: '',
          rank: '',
          name: '',
          phone: '',
          particulars: '',
          mail: '',
          adviserResume: [],
          createUser: 1,
          status: false,
        },
        /*上传图片*/
        file: '',
        echo: '',
        /*表格*/
        columns: [
          {
            title: '排名',
            key: 'rank',
            width: 70,
            align: 'center',
          },
          {
            title: '名字',
            key: 'name',
            align: 'center',
          },
          {
            title: '邮箱',
            key: 'mail',
            align: 'center',
          },
          {
            title: '联系方式',
            key: 'phone',
            align: 'center',
          },
          /*          {
                      title: '是否显示',
                      key: '是否显示',
                      align: 'center',
                      width: 90,
                      render: (h, params) => {
                        return h('i-switch', {
                          props: {
                            value: params.row.status,
                          },
                          on: {
                            'on-change':(value)=>{
                              params.row.status = value;
                              this.switch(params.row)
                            }
                          }
                        })
                      },
                    },*/
          {
            title: '操作',
            key: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show2(params.index);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除'),
              ]);
            }
          },
        ],
        data: [],
        modal2: false,
        index: '',
        /*富文本编辑器*/
        myConfig: {
          UEDITOR_HOME_URL: './static/ue/',
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 350,
          // 初始容器宽度
          initialFrameWidth: 1000,
          // 关闭自动保存
          enableAutoSave: false
        },
      }
    },
    mounted() {
      window.scrollTo(0, 0);
      this.get(this.inquireurl, this.cur)
    },
    methods: {
      /*分页*/
      returnValue(data) {
        this.cur = data;
        this.get(this.inquireurl, this.cur)
      },
      /*添加*/
      show1() {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.addBtn = true;
      },
      /*编辑*/
      show2(index) {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.compileBtn = true;
        this.$axios.get(this.$api.url + "/adviser/AdviserDetails/" + this.data[index].id).then((res) => {
          this.echo = res.data.data[0].phoneUri;
          this.formItem.id = res.data.data[0].id;
          this.formItem.rank = res.data.data[0].rank;
          this.formItem.status = res.data.data[0].status;
          this.formItem.mail = res.data.data[0].mail;
          this.formItem.name = res.data.data[0].name;
          this.formItem.phone = res.data.data[0].phone;
          this.formItem.particulars = res.data.data[0].particulars;
          this.formItem.adviserResume = res.data.data[0].adviserResume;
        });
      },
      /*删除*/
      /*删除*/
      remove(index) {
        this.modal2 = true;
        this.index = this.data[index]
      },
      notarizeRemove() {
        this.$axios.get(this.$api.url + "/adviser/deleteAR/" + this.index.id).then((res) => {
          this.$Message.success(`删除成功!`);
          this.modal2 = false;
          this.get(this.inquireurl, this.cur)
        });
      },
      /*返回*/
      back() {
        this.$router.go(0)
      },
      /*职务添加删除*/
      add() {
        this.formItem.adviserResume.push({position: '',})
      },
      remove1(rew, index) {
        this.formItem.adviserResume.splice(index, 1)
      },
      /*添加保存*/
      save() {
        if (this.formItem.status !== false) {
          if (this.formItem.rank !== '') {
            this.post(this.$api.url + '/adviser/add')
          } else {
            this.$Message.warning(`请填写排名!`);
          }
        } else {
          this.$Message.warning(`请填写排名!`);
        }
      },
      save1() {
        this.post(this.$api.url + '/adviser/updateAdviser')
      },
      /*图片*/
      returnValue1(data) {
        this.echo = '';
        this.file = data
      },
      /*状态*/
      /*      switch(data){
              this.$axios({
                method: 'POST',
                headers: {'Content-Type': 'application/json;charset=UTF-8'},
                data: JSON.stringify(data),
                url: this.URL+'/adviser/upAdviserWithRank',
              }).then((res) => {
                this.get(this.inquireurl, this.cur)
              })
            },*/
      /*post请求*/
      post(url) {
        let _this = this;
        let formData = new FormData();
        formData.append("file", this.file);
        formData.append("adviser", JSON.stringify(this.formItem));
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };
        this.$axios.post(url, formData, config).then(function (res) {
          _this.$router.go(0)
        })
      },
      /*get请求*/
      get(url, cur) {
        this.$axios.get(url + cur).then((res) => {
          this.all = res.data.data.totalPage;
          this.data = res.data.data.lists;
        });
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }

  .add_style {
    padding: 5px 0;
  }

  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 70px;
  }

  .customers {
    border-collapse: collapse;
  }

  .customers td, .customers th {
    border: 1px solid #ccc;
    padding: 3px 7px 2px 7px;
  }

  .customers th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
  }
</style>
